<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-06 10:39:53
 -->
<template>
  <div class="app-container">
    <div>
      <div class="clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <div class="clearfix">
            <el-form
              class="fl form-no-bottom"
              :inline="true"
              :model="searchData"
              label-position="left"
              label-width="80px"
              @keydown.enter.native="btnSearch"
            >
              <el-form-item>
                <span>业务日期： </span>
                <el-date-picker
                  v-model="searchData.rangeTime"
                  type="daterange"
                  :unlink-panels="true"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="onDateChange"
                />
                <el-button
                  type="primary"
                  :loading="btnLoading.search"
                  @click="btnSearch()"
                >
                  搜 索
                </el-button>
                <el-button
                  @click="btnSearch()"
                >
                  筛 选
                </el-button>
              </el-form-item>
            </el-form>
            <!-- <el-button class="fr" @click="btnExportData">导 出</el-button> -->
          </div>
        </el-card>
      </div>
      <vxe-grid
        ref="table"
        class="grid margin-t2"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listCompare } from '@/api/report/purchase-sale-compare.js'
export default {
  name: 'ReportCompare',
  filters: {
  },
  components: {},
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      columnsData: [
        { field: 'code', title: '商品编号', flex: 'left', width: 140 },
        { field: 'name', title: '商品名称', flex: 'left', width: 200, showOverflow: true },
        { field: 'unitName', title: '基本单位', width: 80, align: 'center' },
        { field: 'qtyPurchase', title: '进货量', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { qtyPurchase, qtyPurchaseReturn } = row
              const value = this.$amount(qtyPurchase).subtract(qtyPurchaseReturn).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountPurchase', title: '进货额', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { amountPurchase, amountPurchaseReturn } = row
              const value = this.$amount(amountPurchase).subtract(amountPurchaseReturn).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountAvgPurchase', title: '进货均价', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { amountPurchase, amountPurchaseReturn, qtyPurchase, qtyPurchaseReturn } = row
              let value = '0'
              const disAmount = amountPurchase - amountPurchaseReturn
              const disQty = qtyPurchase - qtyPurchaseReturn
              if (Number(disQty) !== 0) {
                value = this.$amount(disAmount).divide(disQty).format()
              }
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='进货均价 = 进货额 / 进货量' placement='top-end'>
                  <span>进货均价<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'qtySale', title: '销售量', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { qtySale, qtySaleReturn } = row
              const value = this.$amount(qtySale).subtract(qtySaleReturn).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountSale', title: '销售额', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { amountSale, amountSaleReturn } = row
              const value = this.$amount(amountSale).subtract(amountSaleReturn).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'priceCost', title: '销售成本', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { priceCostTotal, priceCostTotalReturn } = row
              const disPrice = this.$amount(priceCostTotal).subtract(priceCostTotalReturn).format()
              const value = disPrice
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='时间区间的成本（不包含已退货）' placement='top-end'>
                  <span>销售成本<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'grossProfitSale', title: '销售毛利', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { amountSale, amountSaleReturn, priceCostTotal, priceCostTotalReturn } = row
              const disAmount = this.$amount(amountSale).subtract(amountSaleReturn).format()
              const disPriceCost = this.$amount(priceCostTotal).subtract(priceCostTotalReturn).format()
              const value = this.$amount(disAmount).subtract(disPriceCost).format()
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='按单累计的毛利（不包含已退货）' placement='top-end'>
                  <span>销售毛利<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'amountAvgSale', title: '销售均价', width: 100, align: 'right',
          slots: {
            default: ({ row }) => {
              const { amountSale, amountSaleReturn, qtySale, qtySaleReturn } = row
              const disAmount = this.$amount(amountSale).subtract(amountSaleReturn).format()
              const diaQty = this.$amount(qtySale).subtract(qtySaleReturn).format()
              const value = this.$amount(disAmount).divide(diaQty).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'remainQty', title: '结余数量', width: 100, align: 'right' },
        { field: 'remianStockAmount', title: '结余库存额', width: 100, align: 'right' },
        { field: 'remianPriceCost', title: '结余成本', width: 100, align: 'right' }
      ]
    }
  },
  watch: {
  },
  created() {
    this.getCompareList()
  },
  methods: {
    btnExportData() {

    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getCompareList().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // api
    getCompareList(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listCompare(params).then(res => {
          this.setTableLoading('table', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('table', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('table', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getCompareList()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getCompareList()
    },
    onDateChange(data) {
      if (data) {
        this.$set(this.searchData, 'beginTime', data[0])
        this.$set(this.searchData, 'endTime', data[1])
      }
    }
  }
}
</script>
<style scoped>

</style>
